<template>
  <div>
    <!-- <a-alert class="table-alert" type="info" show-icon>
      <div slot="message" class="table-alert-info">
        <div class="table-alert-info-content">
          <span style="margin-right: 12px">
            新增 <a style="font-weight: 600">{{ 6 }} </a>
            条不再劝阻人员 。
          </span>
        </div>
      </div>
    </a-alert> -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
        <div class="mode_item mode_item_flex">
          <div class="mode_item_div" style="width:40%;">
            <a-form-model-item label="操作时间">
              <!-- <a-range-picker
                style="width: 100%"
                :allowClear="true"
                valueFormat="YYYY-MM-DD"
                v-model="rangePickerTime"
                @change="rangePickerChange"
              /> -->
              <span class="date-range-picker">
                <a-date-picker
                  v-model="pageFilter.blockedStartTime"
                  placeholder="开始日期"
                  :disabled-date="disabledStartDate"
                  valueFormat="YYYY-MM-DD"
                  @openChange="handleOpenChange($event, 'start')"
                />
                <span class="line">-</span>
                <a-date-picker
                  v-model="pageFilter.blockedEndTime"
                  placeholder="结束日期"
                  :disabled-date="disabledEndDate"
                  valueFormat="YYYY-MM-DD"
                  :open="endOpen"
                  @openChange="handleOpenChange($event, 'end')"
                />
              </span>
            </a-form-model-item>
          </div>
          <div class="mode_item_div">
            <a-form-model-item label="受害人手机号">
              <a-input v-model="pageFilter.msisdn" placeholder="请输入" />
            </a-form-model-item>
          </div>
          <div class="mode_item_div">
            <a-form-model-item label="数据来源">
              <j-dict-select-tag v-model="pageFilter.latestSourceFlag" placeholder="请选择" dictCode="dataSource" />
              <!-- <a-input v-model="pageFilter.latestSourceFlag" placeholder="请输入" /> -->
            </a-form-model-item>
          </div>
          <div class="mode_item_div">
            <a-form-model-item label="操作账号">
              <a-input v-model="pageFilter.sysUserName" placeholder="请输入" />
            </a-form-model-item>
          </div>
        </div>
        <div style="width: 36%; margin-top: 15px">
          <a-form-model-item :wrapper-col="{ offset: 0 }">
            <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
            <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            <!-- <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="show = !show">
              {{ show ? '收起' : '展开' }}
            </a-button> -->
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
    <div class="contentBox">
      <!-- 操作按钮区域 -->
      <div :gutter="16" style="display: flex">
        <downLoadComponents
          ref="downLoadComponents"
          :formData="dlParams"
          :apiUrl="downUrl"
          :fileText="fileText + '.xls'"
        >
          <a-button type="primary" @click="onExportDowm"> 导出数据 </a-button>
        </downLoadComponents>
        <a-button type="primary" @click="onPLHF('pl')" :disabled="isSelected" style="margin-left: 15px">
          批量恢复
        </a-button>
      </div>
      <div style="margin-top: 20px">
        <custom-table
          ref="table"
          rowKey="victimId"
          :showColSettings="false"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          @selectedRowKey="onSelectedRow"
          :dataSource="pageData"
          @change="onTableChange"
        >
          <template slot="order" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
          <template slot="latestSourceFlag" slot-scope="text">
            {{ filterMultiDictText('dataSource', text) }}
          </template>
          <template slot="action" slot-scope="record">
            <a-space size="large">
              <!-- <a-popconfirm
                title="是否要撤回记录?"
                ok-text="是"
                cancel-text="否"
                @confirm="onOperating(record, 4)"
              >
                <a :disabled="record.handleStatus != 1">撤回</a>
              </a-popconfirm> -->
              <a @click="onList(record)">查看</a>
              <a @click="onPLHF(record)">恢复劝阻</a>
              <!-- <a @click="onCancel(record)">取消</a> -->
            </a-space>
          </template>
        </custom-table>
      </div>
    </div>
    <a-modal v-model="modalVisible" title="劝阻状态" ok-text="确认" cancel-text="取消" @ok="onModalOk">
      <span style="margin-left: 30px">劝阻状态：</span>
      <a-radio-group name="radioGroup" :default-value="1" style="margin-left: 30px">
        <a-radio :value="1"> 屏蔽劝阻 </a-radio>
        <a-radio :value="2"> 取消 </a-radio>
      </a-radio-group>
    </a-modal>
    <details-modal ref="detailsModalRef" />
    <list-modal ref="listModalRef" @clickRow="onClickRow"/>
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
import downLoadComponents from '@/components/zxd/downLoad'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { warningScreenPage, dissuadeShield } from '@/api/warning/WarningData.js'
import DetailsModal from '../express/modules/DetailsModal'
import listModal from './listModal'
export default {
  components: {
    CustomTable,
    downLoadComponents,
    DetailsModal,
    listModal,
  },
  data() {
    return {
      endOpen: false,
      rangePickerTime: [],
      taskCodes: [{ value: '1', name: '贷款类' }],
      columns: [
        {
          title: '受害人手机号',
          dataIndex: 'msisdn',
          align: 'center',
          width: 130,
          scopedSlots: { customRender: 'msisdn' },
        },
        {
          title: '受害人姓名',
          dataIndex: 'name',
          align: 'center',
          width: 150,
        },
        {
          title: '受害人身份证号',
          dataIndex: 'victimIdCard',
          align: 'center',
          width: 130,
        },
        {
          title: '数据来源',
          dataIndex: 'latestSourceFlag',
          align: 'center',
          scopedSlots: { customRender: 'latestSourceFlag' },
        },
        {
          title: '最新预警时间',
          dataIndex: 'earlyWarningTime',
          align: 'center',
        },
        {
          title: '操作时间',
          dataIndex: 'blockedTime',
          align: 'center',
        },
        {
          title: '操作账号',
          dataIndex: 'sysUserName',
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 150,
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
      show: false,
      pageData: [],
      isOutDisabled: true,
      isBtnShow: false,
      objTime: {
        beginTime: '',
        endTime: '',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      allDatas: [],
      fileText: '预警屏蔽-导出',
      downUrl: 'jeecg-fz/fzVictimBase/screenExportXls',
      modalVisible: false,
      isSelected: true,
      dlParams: {},
    }
  },
  created() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      warningScreenPage(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onSelectedRow(keys) {
      this.isSelected = keys.length > 0 ? false : true
    },
    initDictConfig() {
      //获取字典值
      initDictOptions('early_warning_level').then((res) => {
        if (res.success) {
          console.log(res.result)
          // this.sexDictOptions = res.result
        }
      })
    },
    onExportDowm() {
      this.dlParams = {
        blockedEndTime: this.pageFilter.blockedEndTime,
        blockedStartTime: this.pageFilter.blockedStartTime,
        latestSourceFlag: this.pageFilter.latestSourceFlag,
        msisdn: this.pageFilter.msisdn,
        sysUserName: this.pageFilter.sysUserName,
        exportSize: this.$refs.table.getSelectedRowKeys().length,
        victimIdList: this.$refs.table.getSelectedRowKeys(),
      }
      setTimeout(() => {
        this.$refs.downLoadComponents.exportDowmPOST()
        this.$refs.table.onClearRowKeys()
      }, 500)
    },
    onModalOk() {
      this.modalVisible = false
    },
    onList(record) {
      this.$refs.listModalRef.handle(record)
    },
    onClickRow(record) {
      this.$refs.detailsModalRef.handle(record)
      this.$refs.detailsModalRef.title = '疑似受害人详情'
      this.$refs.detailsModalRef.disableSubmit = true
    },
    onPLHF(val) {
      let objArr = []
      if (val == 'pl') {
        //批量
        let selectList = this.$refs.table.getSelectedRows()
        objArr = selectList.map((item) => {
          return {
            msisdn: item.msisdn,
            victimId: item.victimId,
          }
        })
      } else {
        //单个
        objArr.push({ msisdn: val.msisdn, victimId: val.victimId })
      }
      // console.log(objArr)
      const parameter = {
        operation: 2,
        userList: objArr,
      }
      let _this = this
      this.$confirm({
        title: `确定恢复劝阻?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          dissuadeShield(parameter)
            .then((res) => {
              if (res.success) {
                _this.onQuery()
                _this.$message.success('操作成功')
                _this.$refs.table.onClearRowKeys()
              }
            })
            .catch((e) => {
              _this.$message.warn('请求失败！')
            })
        },
      })
    },
    handleChange(values) {
      // let value = values[values.length - 1]
      // this.$emit('change', value)
    },
    onQuery() {
      // this.$refs.table.onClearRowKeys()
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.$refs.table.onClearRowKeys()
      this.rangePickerTime = undefined
      this.pageFilter = { pageNo: 1, pageSize: 10 }
      this.refreshTable()
    },
    onTableChange(pageFilter, filters, sorter) {
      // this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.pageFilter.pageNo = pageFilter.currentPage
      this.pageFilter.pageSize = pageFilter.pageSize
      this.refreshTable()
    },
    // 选择等保对象概况时间
    rangePickerChange(date, dateString) {
      this.pageFilter.blockedStartTime = dateString[0]
      this.pageFilter.blockedEndTime = dateString[1]
      this.rangePickerTime = date
    },
    // 操作时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.blockedEndTime
        ? this.$JMoment(this.pageFilter.blockedEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 操作时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.blockedStartTime
      ? this.$JMoment(this.pageFilter.blockedStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 操作时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    },
    onCancel() {},
    filterMultiDictText(dictCode, text) {
      if (!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
  },
}
</script>
<style lang="less" scoped>
.table-page-search-wrapper {
  background-color: #fff;
  padding: 10px 20px;
}
.contentBox {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px 20px;
}
/deep/.mode_item_div:nth-child(1) {
  .ant-col-8 {
    width: 22%;
  }
}
/deep/.ant-col-8:nth-child(2) {
  // width: 32%;
}
.btnBox {
  position: absolute;
  top: 14px;
  right: 20px;
}
.form-item-label {
  /deep/.ant-form-item-label {
    width: 74px;
  }
}
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  .mode_item_div {
    width: 34%;
    padding: 5px 0;
    .ant-form-item {
      margin-bottom: 0;
    }
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.left {
  padding: 8px;
}
.green {
  color: #9bcc4e;
}
.red {
  color: #e1354a;
}
.con-content-top {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  & > * {
    margin-right: 10px;
  }
}
/deep/ .ant-table-tbody .ant-table-row-cell-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left !important;
}
// .ant-radio-group-customize {
//   /deep/.ant-radio-button-wrapper {
//     border-left: 1px solid #d9d9d9;
//     border-radius: 4px 4px 4px 4px;
//     margin-right: 10px;
//     &:not(:first-child)::before {
//       display: none;
//     }
//   }
// }
.zt {
  display: inline-block;
  width: 70px !important;
  padding: 5px 0;
  border-radius: 5px;
  color: #fff;
}
.zt1 {
  background-color: #00bfbf;
}
.zt2 {
  background-color: #1890ff;
}
.zt3 {
  background-color: #ea9d37;
}
.zt4 {
  color: #d9001b;
  border: 1px solid #d9001b;
  text-align: center;
  // background-color: #d9001b;
}
.zt5 {
  color: #999;
  border: 1px solid #999;
  text-align: center;
}
// /deep/.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
//     color: #fff;
//     background: #1890ff;
//     border-color: #1890ff;
// }
/deep/.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  border-color: #1890ff;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
